<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>pure实例2</title>
		<!--1.引入pure.css-->
		<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
		<!--2.引入grids-responsive.css-->
			<!--a.引入在线文件-->
		<!--<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">-->	
			<!--b.引入本地文件-->
		<link rel="stylesheet" type="text/css" href="css/grids-responsive.css"/>
		<!--3.声明视口宽度-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<!--
			根据屏幕大小分列
			大屏 : 一行五列
			中屏 : 一行四列
			小屏 : 一行三列
		-->
		<!--4.创建行-->
		<div class="pure-g">
			<!--5.声明列-->
		    <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-5"><p>Thirds</p></div>
		    <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-5"><p>Thirds</p></div>
		    <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-5"><p>Thirds</p></div>
		    <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-5"><p>Thirds</p></div>
		    <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-5"><p>Thirds</p></div>
		</div>
	</body>
</html>
